<template>
  <div class="I-III-I">
    <table class="I-III-I__table">
      <tr class="I-III-I__table-trone">
        <td class="I-III-I__table-trone-td"
            colspan="7">
          <div class="I-III-I__table-trone-td-title">
            I-3课程建设与教学质量
          </div>
        </td>
      </tr>
      <tr class="I-III-I__table-trtwo">
        <td class="I-III-I__table-trtwo-td"
            colspan="7">
          <div class="I-III-I__table-trtwo-td-title">
            I-3-1研究生课程体系
          </div>
        </td>
      </tr>
      <tr class="I-III-I__table-trthree">
        <td class="I-III-I__table-trthree-td"
            colspan="7">
          <div class="I-III-I__table-trthree-td-title">
            （一）博士生主要课程
            <span class="I-III-I__table-trthree-td-title-tips">
              （不含全校公共课）
            </span>
          </div>
        </td>
      </tr>
      <tr class="I-III-I__table-th">
        <td class="I-III-I__table-th-tdone">
          序号
        </td>
        <td class="I-III-I__table-th-tdtwo">
          课程名称
        </td>
        <td class="I-III-I__table-th-tdthree">
          课程<br>类型
        </td>
        <td class="I-III-I__table-th-tdfour">
          主讲人
        </td>
        <td class="I-III-I__table-th-tdfive">
          主讲人<br>所在院系
        </td>
        <td class="I-III-I__table-th-tdsix">
          学分
        </td>
        <td class="I-III-I__table-th-tdseven">
          授课<br>语言
        </td>
        <el-button type="success"
                   size="small"
                   icon="el-icon-plus"
                   class="I-III-I__table-th-add-button"
                   circle
                   @click.prevent="addDoctorList"/>
      </tr>
      <tr v-for="(item, index) in aca.doctorCourse"
          :key="index + 'boshi'"
          class="I-III-I__table-tr">
        <td class="I-III-I__table-tr-tdone">
          {{ index + 1 }}
        </td>
        <td class="I-III-I__table-tr-tdtwo">
          <el-input v-model="item.courseName"
                    type="textarea"
                    autosize
                    placeholder="填写课程名称"
                    :maxlength="30"/>
        </td>
        <td class="I-III-I__table-tr-tdthree">
          <el-select v-model="item.courseType"
                     class="I-III-I__table-tr-tdthree-select"
                     placeholder="请选择">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"/>
          </el-select>
        </td>
        <td class="I-III-I__table-tr-tdfour">
          <el-input v-model="item.speaker"
                    type="textarea"
                    autosize
                    placeholder="填写主讲人"
                    :maxlength="30"/>
        </td>
        <td class="I-III-I__table-tr-tdfive">
          <el-input v-model="item.dept"
                    type="textarea"
                    autosize
                    placeholder="填写主讲人所在院系"
                    :maxlength="30"/>
        </td>
        <td class="I-III-I__table-tr-tdsix">
          <el-input v-model="item.credit"
                    type="textarea"
                    autosize
                    placeholder="填写学分"
                    :maxlength="30"
                    oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}"/>
        </td>
        <td class="I-III-I__table-tr-tdseven">
          <el-input v-model="item.language"
                    type="textarea"
                    autosize
                    placeholder="填写授课语言"
                    :maxlength="30"/>
        </td>
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   class="I-III-I__table-tr-delete-button"
                   circle
                   @click.prevent="deleteDoctorItem(index)"/>
      </tr>
      <tr class="I-III-I__table-trthree">
        <td class="I-III-I__table-trthree-td"
            colspan="7">
          <div class="I-III-I__table-trthree-td-title">
            （二）硕士生主要课程
            <span class="I-III-I__table-trthree-td-title-tips">
              （不含全校公共课）
            </span>
          </div>
        </td>
      </tr>
      <tr class="I-III-I__table-th">
        <td class="I-III-I__table-th-tdone">
          序号
        </td>
        <td class="I-III-I__table-th-tdtwo">
          课程名称
        </td>
        <td class="I-III-I__table-th-tdthree">
          课程<br>类型
        </td>
        <td class="I-III-I__table-th-tdfour">
          主讲人
        </td>
        <td class="I-III-I__table-th-tdfive">
          主讲人<br>所在院系
        </td>
        <td class="I-III-I__table-th-tdsix">
          学分
        </td>
        <td class="I-III-I__table-th-tdseven">
          授课<br>语言
        </td>
        <el-button type="success"
                   size="small"
                   icon="el-icon-plus"
                   class="I-III-I__table-th-add-button"
                   circle
                   @click.prevent="addMasterItem"/>
      </tr>
      <tr v-for="(item, index) in aca.masterCourse"
          :key="index + 'shuoshi'"
          class="I-III-I__table-tr">
        <td class="I-III-I__table-tr-tdone">
          {{ index + 1 }}
        </td>
        <td class="I-III-I__table-tr-tdtwo">
          <el-input v-model="item.courseName"
                    type="textarea"
                    autosize
                    placeholder="填写课程名称"
                    :maxlength="30"/>
        </td>
        <td class="I-III-I__table-tr-tdthree">
          <el-select v-model="item.courseType"
                     class="I-III-I__table-tr-tdthree-select"
                     placeholder="请选择">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"/>
          </el-select>
        </td>
        <td class="I-III-I__table-tr-tdfour">
          <el-input v-model="item.speaker"
                    type="textarea"
                    autosize
                    placeholder="填写主讲人"
                    :maxlength="30"/>
        </td>
        <td class="I-III-I__table-tr-tdfive">
          <el-input v-model="item.dept"
                    type="textarea"
                    autosize
                    placeholder="填写主讲人所在院系"
                    :maxlength="30"/>
        </td>
        <td class="I-III-I__table-tr-tdsix">
          <el-input v-model="item.credit"
                    type="textarea"
                    autosize
                    placeholder="填写学分"
                    :maxlength="30"/>
        </td>
        <td class="I-III-I__table-tr-tdseven">
          <el-input v-model="item.language"
                    type="textarea"
                    autosize
                    placeholder="填写授课语言"
                    :maxlength="30"/>
        </td>
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   class="I-III-I__table-tr-delete-button"
                   circle
                   @click.prevent="deleteMasterItem(index)"/>
      </tr>
      <tr class="I-III-I__table-trfive">
        <td class="I-III-I__table-trfive-td"
            colspan="7">
          <div class="I-III-I__table-trfive-td-title">
            （三）课程教学改革与质量督导的创新做法
            <span class="I-III-I__table-trfive-td-title-tips">
              （限 800 字）
            </span>
          </div>
        </td>
      </tr>
      <tr class="I-III-I__table-trsix">
        <td class="I-III-I__table-trsix-td"
            colspan="7">
          <el-input v-model="aca.practice"
                    type="textarea"
                    :autosize="{ minRows: 8 }"
                    showWordLimit
                    placeholder="请输入思想政治教育特色做法"
                    :maxlength="800"
                    class="two_indent"/>
        </td>
      </tr>
    </table>
    <div class="I-III-I__explain">
      <span class="I-III-I__explain-strong">
        说明：①
      </span>
      本表填写研究生课程体系以及课程教学改革与质量督导的创新做法。
      <span class="I-III-I__explain-strong">
        ②
      </span>
      表（一）和表（二）“博士生/硕士生主要课程”填写评估期内实际开设的主要课程（含科研伦理与学术规范课程，不含全校公共课）。
      <span class="I-III-I__explain-strong">
        ③
      </span>
      主讲人为外单位人员的，请在“主讲人所在院系”栏中填写单位名称。
      <span class="I-III-I__explain-strong">
        ④
      </span>
      “课程类型”限填“必修课、选修课”。
      <span class="I-III-I__explain-strong">
        ⑤
      </span>
      “授课语言”填写“中文、英文、中英双语”等。
    </div>
  </div>
</template>

<script>
import { getPageData } from '@/utils/getData.js'

export default {
  async mounted () {
    const loading = this.$loading({ lock: true, text: '数据获取中...请稍后！', background: 'rgba(0, 0, 0, 0.7)' })
    this.aca = await getPageData('aca')
    loading.close()
  },
  watch: {
    aca: {
      handler (newVal) {
        sessionStorage['this_data'] = JSON.stringify(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      options: [
        { value: '0', label: '必修课' },
        { value: '1', label: '选修课' }],
      aca: {
        doctorCourse: [],
        masterCourse: [],
        practice: ''
      }
    }
  },
  methods: {
    addDoctorList () {
      this.aca.doctorCourse.push({ courseName: '', courseType: '', speaker: '', dept: '', credit: '', language: '' })
    },
    deleteDoctorItem (index) {
      if (this.aca.doctorCourse.length > 1) {
        this.aca.doctorCourse.splice(index, 1)
      }
    },
    addMasterItem () {
      this.aca.masterCourse.push({ courseName: '', courseType: '', speaker: '', dept: '', credit: '', language: '' })
    },
    deleteMasterItem (index) {
      if (this.aca.masterCourse.length > 1) {
        this.aca.masterCourse.splice(index, 1)
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/page/1-3-1.less';
</style>
